<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
		<title>携程app</title>
		<link rel="shortcut icon" href="https://mat1.gtimg.com/chinanba/images/favicon.ico">
		<link rel="stylesheet" href="../css/swiper.min.css" type="text/css" />
		<script src="../js/swiper.js"></script>
		<script src="../js/jquery-1.12.2.js"></script>
		<script src="../js/rem.js"></script>
		<!-- 自定义的样式 -->
		<link rel="stylesheet" href="../css/index.css" type="text/css" />
		<!-- 自定义的js -->
		<script src="../js/index.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 1、轮播图 -->
			<div class="swiper-container">
				<!-- 1-1、轮播的图片 -->
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="../img/1.jpg" alt="1.jpg">
					</div>
					<div class="swiper-slide">
						<img src="../img/2.jpg" alt="2.jpg">
					</div>
					<div class="swiper-slide">
						<img src="../img/3.jpg" alt="3.jpg">
					</div>
					<div class="swiper-slide">
						<img src="../img/4.jpg" alt="4.jpg">
					</div>
					<div class="swiper-slide">
						<img src="../img/5.jpg" alt="5.jpg">
					</div>
				</div>
				<!--1-2、轮播分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<!-- 2、列表区域 -->
			<div class="xc-list">
				<ul>
					<li><a href="#">酒店</a></li>
					<li><a href="#">海外酒店</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">特价酒店</a></li>
					<li><a href="#">民宿·客栈</a></li>
				</ul>
				<ul>
					<li><a href="#">机票</a></li>
					<li><a href="#">火车票·抢票</a></li>
					<li><a href="#">特价机票</a></li>
					<li><a href="#">汽车票·船票</a></li>
					<li><a href="#">专车·租车</a></li>
				</ul>
				<ul>
					<li><a href="#">旅游</a></li>
					<li><a href="#">目的地攻略</a></li>
					<li><a href="#">周边游</a></li>
					<li><a href="#">邮轮旅行</a></li>
					<li><a href="#">定制旅行</a></li>
				</ul>
				<ul>
					<li><a href="#">景点·玩乐</a></li>
					<li><a href="#">礼品卡</a></li>
					<li><a href="#">美食林</a></li>
					<li><a href="#">WiFi·电话卡</a></li>
					<li><a href="#">购物·信用卡</a></li>
					<li><a href="#">保险·签证</a></li>
				</ul>
			</div>
			<!-- 4、页脚 -->
			<div class="hot">
				<img src="../img/pic_sale.png">
			</div>
			<!-- 4、页脚 -->
			<div class="download">
				<ul>
					<li><a href="#">电话预定</a></li>
					<li><a href="#">下载客户端</a></li>
					<li><a href="#">我的携程</a></li>
				</ul>
			</div>
			<!-- 5、底部 -->
			<div class="footer">
				<ul>
					<li><a href="">English</a></li>
					<li><a href="">电脑端</a></li>
					<li><a href="">意见反馈</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>
